% rebase('layout.tpl', title=title, year=year, jsfiles=['jquery-1.10.2.min.js', 'vue.min.js'])

<form action="/plan/create" method="post" id="app">
    <div class="form-group">
        <label class="control-label" for="rack">Rack</label>
        <input class="form-control" type="text" name="rack" id="rack">
    </div>
    <div class="form-group">
        <label class="control-label" for="location">Location</label>
        <input class="form-control" type="text" name="location" id="location">
    </div>
    <div class="form-group">
        <label class="control-label" for="mac">MAC</label>
        <input class="form-control" type="text" name="mac" id="mac">
    </div>
    <div class="form-group">
        <label class="control-label" for="pxe_list">Plan</label>
        <button type="button" v-on:click="add_pxe()" class="btn btn-default">Add</button>
        <ol class="list-group" style="width: fit-content;margin-top: 5px;margin-bottom:5px;">
            <li v-for="(pxe, index) in pxe_list" class="list-group-item" style="padding: 2px 2px;">
                <select v-model="pxe.pxe" style="width: 30em;padding: 1px;">
                    <option v-for="cfg in all_cfgs" :value="cfg">
                        ${ cfg }
                    </option>
                </select>
                <label> X </label>
                <input v-model="pxe.cycle" style="width: 5em;text-align: right;padding: 1px;">
                <button type="button" v-on:click="up_pxe(index)" v-bind:class="['btn', 'btn-default', {disabled: index == 0}]">Up</button>
                <button type="button" v-on:click="down_pxe(index)" v-bind:class="['btn', 'btn-default', {disabled: index == pxe_list.length-1}]" >Down</button>
                <button type="button" v-on:click="del_pxe(index)" class="btn btn-danger" style="margin-left: 2em">Delete</button>
            </li>
        </ol>
        <textarea v-model="pxe_list_text" class="form-control" name="pxe_list" id="pxe_list" cols="80" rows="10"></textarea>
    </div>
    <button type="submit" class="btn btn-default">Create</button>
</form>

<script>
    var data = {
        all_cfgs: [],
        pxe_list: [],
    }
    var app = new Vue({
        delimiters: ['${', '}'],
        el: '#app',
        data: data,
        computed: {
            pxe_list_text: function () {
                return this.pxe_list.map(function (i) { return i.pxe + ',' + i.cycle }).join('\n');
            }
        },
        methods: {
            add_pxe: function add_pxe() {
                this.pxe_list.push({
                    pxe: app.all_cfgs[0],
                    cycle: 1
                });
            },
            del_pxe: function (index) {
                this.pxe_list.splice(index, 1);
            },
            up_pxe: function (index) {
                var temp = this.pxe_list[index];
                this.$set(this.pxe_list, index, this.pxe_list[index-1]);
                this.$set(this.pxe_list, index-1, temp);
            },
            down_pxe: function (index) {
                var temp = this.pxe_list[index];
                this.$set(this.pxe_list, index, this.pxe_list[index+1]);
                this.$set(this.pxe_list, index+1, temp);
            }
        }
    });

    $.get("/ajax/cfg")
        .done(function (data) {
            // console.log(data);
            cfgs = data.cfgs;
            for (var i = 0; i < cfgs.length; i++) {
                app.all_cfgs.push(cfgs[i])
            }
        })
        .fail(function (data) {
            console.log('Error: ' + data);
        })

</script>